<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout/simple}">
<head>
	<title>用户注册</title>
</head>
<body>
<th:block layout:fragment="page-content">
	<header class="wx-header">
      <h1 class="wx-title">用户注册</h1>
    </header>
    <form id="form">
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">账户</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" name="username" type="text" placeholder="邮箱地址或者手机号码">
				</div>
				<div class="weui_cell_ft">
                	<i class="weui_icon_warn"></i>
            	</div>
			</div>
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">密码</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" name="password" type="password" placeholder="您的密码">
				</div>
				<div class="weui_cell_ft">
	                <i class="weui_icon_warn"></i>
	            </div>
			</div>
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">确认密码</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" name="confirmPassword" type="password" placeholder="再输入一次您的密码">
				</div>
				<div class="weui_cell_ft">
	                <i class="weui_icon_warn"></i>
	            </div>
			</div>
			<div class="weui_cell weui_vcode weui_captcha">
				<div class="weui_cell_hd">
					<label class="weui_label">验证码</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="text" name="captcha" placeholder="点击验证码更换">
				</div>
				<div class="weui_cell_ft">
                	<i class="weui_icon_warn"></i>
                	<a class="weui-vcode-btn"><img id="captcha" th:src="@{/api/captcha}" /></a>
            	</div>
			</div>
			<div class="weui_cell weui_vcode">
				<div class="weui_cell_hd">
					<label class="weui_label">校验码</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="number" name="code" placeholder="校验码" >
				</div>
				<div class="weui_cell_ft">
                	<i class="weui_icon_warn"></i>
                	<a id="code" href="javascript:;" class="weui-vcode-btn">获取校验码</a>
            	</div>
			</div>
		</div>
	
		<div class="weui_btn_area">
			<button id="formSubmitBtn" class="weui_btn weui_btn_primary" type="submit">注册</button>
		</div>
	</form>

</th:block>
<th:block layout:fragment="page-js">
<script type="text/javascript">
$(function(){
	
	function changeCaptcha(){
		$('#captcha').attr('src', contextPath + '/api/captcha?r='+Math.random());
	}
	
	var isSend = true;//是否允许发送验证码
	function ajaxSendCode(){
		$.ajax({
			type: 'post',
			url: contextPath + '/api/confirm/code/send/register',
			data: {username: $('[name="username"]').val(), captcha: $('[name="captcha"]').val()},
			dataType: 'json',
			beforeSend: function(){
				$.showLoading('正在发送');
			},
			success: function(result){
				$.hideLoading();
				if(result.success){
					$.toptips('校验码发送成功', 'ok');
					isSend = false;
					codeTime();
				} else {
					$.toptips(result.message);
					changeCaptcha();
				}
			}
		});
	}
	
	function codeTime(){
		var index = 60;
		var interval = setInterval(function(){
			index--;
			$('#code').text('重新获取('+index+')');
			if(index <= 0){
				$('#code').text('获取校验码');
				isSend = true;
				clearInterval(interval);
			}
		},1000);
	}
	
	function ajaxSubmitForm(){
		$.ajax({
			type: 'post',
			url: contextPath + '/user/register',
			data: $("#form").serialize(),
			dataType: 'json',
			beforeSend: function(){
				$.showLoading('正在处理');
			},
			success: function(result){
				$.hideLoading();
				if(result.success){
					location.href = contextPath + "/wechat/success?url="+contextPath+"/index&time=2&msg=恭喜您，注册成功";
				} else {
					//$.toast(result.message, "forbidden");
					$.toptips(result.message);
					$.showResult(result);
				}
			}
		});
	}
	
	$('body').on('click', '#captcha', function(){
		changeCaptcha();
	});
	
	$('body').on('click', '#code', function(){
		var usernameValid = $('[name="username"]').valid(), captchaValid = $('[name="captcha"]').valid();
		if(usernameValid && captchaValid && isSend){
			ajaxSendCode();
		}
		
	});
	
	$("#form").validate({
		rules : {
			 username: {
				 required: true,
				 phoneOrEmail: true
			 },
			 captcha: {
				 required: true,
				 length: 4,
				 remote: contextPath + '/api/captcha/verify'
			 },
			 code: {
				 required: true,
				 length: 6,
				 digits: true
			 },
			 password: {
				 required: true,
				 minlength: 6
			 },
			 confirmPassword: {
				 required: true,
				 minlength: 6,
				 equalTo: '[name="password"]'
			 }
		 },
		 messages: {
			 username: {
				 phoneOrEmail: "邮箱地址或者手机号码格式不正确"
			 },
			 captcha: {
				 length: $.validator.format("长度只能为{0}"),
				 remote: '验证码错误'
			 },
			 code: {
				 length: $.validator.format("长度只能为{0}"),
				 digits: '只能为数字'
			 },
			 password: {
				 minlength: $.validator.format("密码至少 {0} 位")
			 },
			 confirmPassword: {
				 minlength: $.validator.format("密码至少 {0} 位"),
				 equalTo: '两次密码不一致'
			 }
		 },
		 submitHandler: function(form){
			 ajaxSubmitForm();
			 return false;
		 }
		 
	});
});
</script>
</th:block>
</body>
</html>
